<template>
    <div class="content">
        <van-tabs sticky class="reset">
            <van-tab title="多处住所">
                <template v-for="(item, index) in address">
                    <van-cell-group :key="index">
                        <div class="inner-box">
                            <van-field
                                    v-model="address[index]"
                                    autosize
                                    clearable
                                    type="textarea"
                                    :placeholder="'请输入地址' + (parseInt(index)+1)"
                                    use-button-slot
                            >
                                <van-button slot="button" size="mini" type="danger" @click="delAddress(index)" plain
                                            hairline>删除
                                </van-button>
                            </van-field>
                        </div>
                    </van-cell-group>
                </template>
                <van-row class="addBox">
                    <van-col offset="19" span="4">
                        <van-button size="mini" type="info" @click="addAddress" plain>添加地址</van-button>
                    </van-col>
                </van-row>
                <div class="div-bot">
                    <div class="city-card-common-btn" @click="insertPermitAddress">提交</div>
                </div>
            </van-tab>
            <van-tab title="探望亲人">
                <template v-for="(item, index) in person">
                    <van-cell-group :key="index">
                        <div class="inner-box">
                            <van-field
                                    v-model="item.relation"
                                    clearable
                                    placeholder="请输入探望人关系"
                            >
                            </van-field>
                            <van-field
                                    v-model="item.name"
                                    clearable
                                    placeholder="请输入探望人姓名"
                                    use-button-slot
                            >
                                <van-button slot="button" size="mini" type="danger" @click="delPerson(index)" plain
                                            hairline>删除
                                </van-button>
                            </van-field>
                            <van-field
                                    v-model="item.cardno"
                                    clearable
                                    placeholder="请输入探望人身份证号"
                            >
                            </van-field>
                        </div>
                    </van-cell-group>
                </template>
                <van-row class="addBox">
                    <van-col offset="19" span="5">
                        <van-button size="mini" type="info" @click="addPerson" plain>添加信息</van-button>
                    </van-col>
                </van-row>
                <div class="div-bot">
                    <div class="city-card-common-btn" @click="insertPermitPerson">提交</div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import {
  insertPermitAddress,
  insertPermitPerson
} from '@/api/yi-qing-fang-kong.js'
import { Dialog } from 'vant'
// 获取用户信息
import { getUserLoginInfo } from '@/api/wx-api'
export default {
  data () {
    return {
      id: this.$route.query.id,
      address: ['', ''],
      person: [{ relation: '', name: '', cardno: '' }]
    }
  },
  methods: {
    delAddress (index) {
      this.address.splice(index, 1)
    },
    addAddress () {
      this.address.push('')
    },
    delPerson (index) {
      this.person.splice(index, 1)
    },
    addPerson () {
      this.person.push({ relation: '', name: '', cardno: '' })
    },
    submit () {

    },
    insertPermitAddress () {
      const data = { address: JSON.stringify(this.address) }
      insertPermitAddress(data).then(ret => {
        if (ret.data.errcode === 0) {
          Dialog.alert({
            message: '提交成功'
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          })
          return false
        }
      })
    },
    insertPermitPerson () {
      insertPermitPerson({ dataList: this.person }).then(ret => {
        if (ret.data.errcode === 0) {
          Dialog.alert({
            message: '提交成功'
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          })
          return false
        }
      })
    },
    getMyInfo () {
      getUserLoginInfo().then(ret => {
      })
    }
  },
  mounted () {
    // 获取登录信息
    this.getMyInfo()
  }
}
</script>

<style scoped>
    .content {
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
    }

    .inner-box {
        margin-bottom: 10px;
    }

    /deep/ .van-tabs__line {
        background-color: #00a1db;
    }

    /deep/ .van-tab--active {
        color: #00a1db;
    }

    .addBox {
        margin-top: 8px;
    }

    .div-bot {
        padding: 8px;
    }

    .div-bot .city-card-common-btn {
        color: white;
        font-size: 12px;
        padding: 10px 0;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #7AB46D;
        margin-bottom: 5px;
    }

    /deep/ .van-field__control {
        min-height: 28px !important;
        /*max-height: 60px !important;*/
    }
</style>
